<template>
	<div>
		<div>
			<div>1.菜单与路由分离，菜单由后端返回(前端组件与菜单进行匹配)</div>
			<div style="margin-bottom: 15px">对系统权限要求不太严格的可以使用：但是无法避免认为通过地址栏强行访问url，即使拦截也最多拦截到左边菜单栏的，无法拦截一些detail页面</div>
			<div>2.由后端返回菜单路由，前端将权限路由转换成动态生成的视图组件添加到router实例</div>
			<div>这样即可通过地址栏输入url进行强行访问，也只会导航到404</div>
			<el-button v-auth="'edit'" type="primary">权限按钮</el-button>
			<el-button type="primary">{{ title }}</el-button>
			<div style="height:600px">滚动条</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const auth = ref("edit");
const title = '普通按钮'
</script>

<style>
</style>